<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../resources.jsp" %>

<html>
<head>
    <title>用户管理</title>

    <link rel="stylesheet" href="/css/upload/webuploader.css">

    <style type="text/css">
        .wu-example {
            position: relative;
            padding: 45px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }
        .wu-example:after {
            content:"示例";
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 12px;
            font-weight: bold;
            color: #bbb;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #uploader .placeholder {
            min-height: 200px;
            padding-top: 178px;
            text-align: center;
            background: url(../images/image.png) center 93px no-repeat;
            color: #cccccc;
            font-size: 18px;
            position: relative;
        }

        #uploader .placeholder .webuploader-pick {
            font-size: 18px;
            background: #00b7ee;
            border-radius: 3px;
            line-height: 44px;
            padding: 0 30px;
            *width: 120px;
            color: #fff;
            display: inline-block;
            margin: 0 auto 20px auto;
            cursor: pointer;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        #uploader .placeholder .webuploader-pick-hover {
            background: #00a2d4;
        }

        #uploader .placeholder .flashTip {
            color: #666666;
            font-size: 12px;
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 20px;
        }
        #uploader .placeholder .flashTip a {
            color: #0785d1;
            text-decoration: none;
        }
        #uploader .placeholder .flashTip a:hover {
            text-decoration: underline;
        }


        #uploader .queueList {
            margin: 20px;
            border: 3px dashed #e6e6e6;
        }
        #uploader .queueList.filled {
            padding: 17px;
            margin: 0;
            border: 3px dashed transparent;
        }
        #uploader .queueList.webuploader-dnd-over {
            border: 3px dashed #999999;
        }
    </style>
</head>
<body>
<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">用户新增</h3>
        </div>

        <form class="form-horizontal ems_internal_form">
            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">姓名：</label>
                <div class="col-sm-6">
                    <input type="text" required class="form-control" id="name" placeholder="姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="age" class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-6">
                    <input type="number" class="form-control" id="age" placeholder="年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">邮箱：</label>
                <div class="col-sm-6">
                    <input type="email" class="form-control" id="email" placeholder="邮箱">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">图片上传：</label>
                <div class="col-sm-9">
                    <%--<div id="uploader" class="wu-example">--%>
                        <%--<div class="queueList">--%>
                            <%--<div id="dndArea" class="placeholder">--%>
                                <%--<div id="filePicker"></div>--%>
                                <%--<p>或将照片拖到这里，单次最多可选300张</p>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                        <%--<div class="statusBar" style="display:none;">--%>
                            <%--<div class="progress">--%>
                                <%--<span class="text">0%</span>--%>
                                <%--<span class="percentage"></span>--%>
                            <%--</div><div class="info"></div>--%>
                            <%--<div class="btns">--%>
                                <%--<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                        <!--dom结构部分-->
                        <div id="uploader-demo">
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list"></div>
                            <div id="filePicker">选择图片</div>
                        </div>
                </div>
            </div>


            <div class="form-group ems_op_btn_group">
                <button type="submit" class="btn btn-success ems_btn_form_submit">提交</button>
                <button type="button" class="btn btn-default ems_btn_form_cancel">取消</button>
            </div>
        </form>
    </div>
</div>
<script>

    $.validator.setDefaults({
        submitHandler: function() {
            saveUser();
        }
    });

    function saveUser() {
        $.ajax({
            url:"/user/save",
            type:"POST",
            data:{name:$("#name").val(),age:$("#age").val(),email:$("#email").val()},
            success:function () {
                window.location.href = "/user/index";
            }
        })
    }

    $(function () {
        $(".ems_internal_form").validate();
    })
</script>

<script src="/js/upload/webuploader.min.js"></script>
<script src="/js/ems/ems_upload.js"></script>
</body>
</html>
